<template>
  <div id="app">
    <!-- 只有在非登录、非用户协议、非隐私政策页面才显示头部和底部 -->
    <template v-if="$route.path !== '/login' && $route.path !== '/user-agreement' && $route.path !== '/privacy-policy'">
      <header class="navbar" :class="{ 'scrolled': isScrolled, 'mobile-collapsed': isMobileCollapsed }">
        <div class="navbar-container">
          <!-- Logo区域 -->
          <div class="navbar-logo">
            <router-link to="/" class="logo-link">
              <div class="logo-icon">🍃</div>
              <h1 class="logo-text">绿碳圈</h1>
            </router-link>
          </div>

          <!-- 桌面端导航菜单 -->
          <nav class="navbar-menu" v-if="!isMobile">
            <router-link 
              to="/" 
              class="nav-link" 
              :class="{ 'active': $route.path === '/' }"
            >
              首页
            </router-link>
            <router-link 
              to="/community" 
              class="nav-link" 
              :class="{ 'active': $route.path === '/community' }"
            >
              绿色动态
            </router-link>
            <router-link 
              to="/challenge" 
              class="nav-link" 
              :class="{ 'active': $route.path === '/challenge' }"
            >
              知识挑战
            </router-link>
            <router-link 
              to="/carbon" 
              class="nav-link" 
              :class="{ 'active': $route.path === '/carbon' }"
            >
              碳足迹
            </router-link>
            <router-link 
              to="/exchange" 
              class="nav-link" 
              :class="{ 'active': $route.path === '/exchange' }"
            >
              绿色交换
            </router-link>
            <router-link 
              to="/guide" 
              class="nav-link" 
              :class="{ 'active': $route.path === '/guide' }"
            >
              城市指南
            </router-link>
          </nav>

          <!-- 用户区域 -->
          <div class="navbar-user">
            <button class="notification-btn">
              <span class="bell-icon">🔔</span>
              <span class="notification-badge" v-if="notificationCount > 0">{{ notificationCount }}</span>
            </button>
            <div class="avatar-dropdown" @mouseenter="onAvatarEnter" @mouseleave="onAvatarLeave">
              <div class="user-avatar">
                <img v-if="userAvatar" :src="userAvatar" alt="用户头像">
                <div v-else class="avatar-fallback">{{ username.slice(0, 1) }}</div>
              </div>
              <div class="dropdown-menu" v-show="showAvatarDropdown">
                <router-link to="/profile" class="dropdown-item">个人中心</router-link>
                <router-link to="/profile/edit" class="dropdown-item">编辑资料</router-link>
                <button class="dropdown-item" @click="handleLogout">退出登录</button>
              </div>
            </div>
          </div>

          <!-- 移动端汉堡菜单按钮 -->
          <button class="mobile-menu-btn" @click="toggleMobileMenu" v-if="isMobile">
            <span class="hamburger-line" :class="{ 'active': mobileMenuOpen }"></span>
            <span class="hamburger-line" :class="{ 'active': mobileMenuOpen }"></span>
            <span class="hamburger-line" :class="{ 'active': mobileMenuOpen }"></span>
          </button>
        </div>

        <!-- 移动端导航菜单 -->
        <div class="mobile-menu" :class="{ 'active': mobileMenuOpen }" v-if="isMobile">
          <div class="mobile-menu-content">
            <div class="mobile-menu-header">
              <router-link to="/profile" class="mobile-user-profile">
                <div class="user-avatar">
                  <img v-if="userAvatar" :src="userAvatar" alt="用户头像">
                  <div v-else class="avatar-fallback">{{ username.slice(0, 1) }}</div>
                </div>
                <div class="user-info">
                  <span class="username">{{ username }}</span>
                  <div class="user-points">
                    <span class="points-icon">⭐</span>
                    <span class="points-value">{{ userPoints }}</span>
                  </div>
                </div>
              </router-link>
            </div>
            <nav class="mobile-nav">
              <router-link 
                to="/" 
                class="mobile-nav-link" 
                :class="{ 'active': $route.path === '/' }"
                @click="closeMobileMenu"
              >
                <span class="nav-icon">🏠</span>
                首页
              </router-link>
              <router-link 
                to="/community" 
                class="mobile-nav-link" 
                :class="{ 'active': $route.path === '/community' }"
                @click="closeMobileMenu"
              >
                <span class="nav-icon">💬</span>
                绿色动态
              </router-link>
              <router-link 
                to="/challenge" 
                class="mobile-nav-link" 
                :class="{ 'active': $route.path === '/challenge' }"
                @click="closeMobileMenu"
              >
                <span class="nav-icon">🏆</span>
                知识挑战
              </router-link>
              <router-link 
                to="/carbon" 
                class="mobile-nav-link" 
                :class="{ 'active': $route.path === '/carbon' }"
                @click="closeMobileMenu"
              >
                <span class="nav-icon">🌍</span>
                碳足迹
              </router-link>
              <router-link 
                to="/exchange" 
                class="mobile-nav-link" 
                :class="{ 'active': $route.path === '/exchange' }"
                @click="closeMobileMenu"
              >
                <span class="nav-icon">♻️</span>
                绿色交换
              </router-link>
              <router-link 
                to="/guide" 
                class="mobile-nav-link" 
                :class="{ 'active': $route.path === '/guide' }"
                @click="closeMobileMenu"
              >
                <span class="nav-icon">📖</span>
                城市指南
              </router-link>
            </nav>
            <div class="mobile-menu-footer">
              <button class="mobile-notification-btn">
                <span class="bell-icon">🔔</span>
                消息通知
                <span class="notification-badge" v-if="notificationCount > 0">{{ notificationCount }}</span>
              </button>
              <button class="mobile-logout-btn" @click="handleLogout">
                <span class="logout-icon">🚪</span>
                退出登录
              </button>
            </div>
          </div>
          <div class="mobile-menu-overlay" @click="closeMobileMenu"></div>
        </div>
      </header>

        <!-- 主要内容区域 -->
        <main class="main-content" :class="{ 'with-bottom-nav': $route.path !== '/login' && $route.path !== '/user-agreement' && $route.path !== '/privacy-policy' && isLoggedIn }">
          <router-view />
        </main>

        <button
          v-show="showBackToTop"
          class="back-to-top"
          :style="{ bottom: (isMobile && isLoggedIn ? '92px' : '24px') }"
          @click="scrollToTop"
          aria-label="回到顶部"
        >↑</button>

        <!-- 底部导航栏 - 移动端显示 -->
        <BottomNav v-if="$route.path !== '/login' && $route.path !== '/user-agreement' && $route.path !== '/privacy-policy' && isLoggedIn" :userAvatar="userAvatar" :username="username" />
        <!-- 页脚 - 仅桌面端显示 -->
        <footer class="footer">
          <div class="footer-content fat-footer">
            <div class="footer-section footer-brand">
              <div class="brand-row">
                <div class="logo-icon">🍃</div>
                <div class="brand-info">
                  <div class="brand-name">绿碳圈</div>
                  <div class="brand-desc">这是一个致力于解决环保信息传播痛点的平台。</div>
                  <div class="brand-version">v1.0.0</div>
                </div>
              </div>
            </div>
            <div class="footer-section">
              <h3>政策与条款</h3>
              <ul>
                <li><router-link to="/privacy-policy">隐私政策</router-link></li>
                <li><router-link to="/user-agreement">服务政策</router-link></li>
              </ul>
            </div>
            <div class="footer-section">
              <h3>项目文档</h3>
              <ul>
                <li><a href="/api/docs/" target="_blank" rel="noopener">API 文档</a></li>
                <li><a :href="readmeUrl" target="_blank" rel="noopener">ReadMe</a></li>
              </ul>
            </div>
            <div class="footer-section">
              <h3>联系我们</h3>
              <p>邮箱：contact@greencircle.com</p>
              <p>电话：400-123-4567</p>
            </div>
          </div>
          <div class="footer-bottom">
            <p>&copy; 2025 绿碳圈</p>
          </div>
        </footer>
    </template>
    
    <!-- 登录、用户协议、隐私政策页面不显示头部和底部 -->
    <template v-else>
      <router-view />
    </template>

    <div v-if="pointsToast.show" class="points-toast">
      <div class="toast-card">
        <div class="toast-title">碳积分奖励</div>
        <div class="toast-body">
          <span class="delta">+{{ pointsToast.delta }}</span>
          <span class="sep">/</span>
          <span class="total">当前：{{ pointsToast.total }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, provide } from 'vue'
import { useRouter } from 'vue-router'
import request from './utls/require'
import BottomNav from './components/BottomNav.vue'

// 响应式状态
const isScrolled = ref(false)
const isMobile = ref(false)
const isMobileCollapsed = ref(false)
const mobileMenuOpen = ref(false)
const notificationCount = ref(3)
const readmeUrl = window.location.origin + '/README.md'
const showBackToTop = ref(false)

const router = useRouter()
const username = ref('用户')
const userAvatar = ref('')
const userPoints = ref(0)
const isLoggedIn = ref(false)
const userStatistics = ref({
  posts_count: 0,
  completed_challenges_count: 0,
  carbon_records_count: 0
})

// 头像下拉交互（解决悬浮消失问题）
const showAvatarDropdown = ref(false)
let hideDropdownTimer: any = null
const onAvatarEnter = () => {
  if (hideDropdownTimer) {
    clearTimeout(hideDropdownTimer)
    hideDropdownTimer = null
  }
  showAvatarDropdown.value = true
}
const onAvatarLeave = () => {
  hideDropdownTimer = setTimeout(() => {
    showAvatarDropdown.value = false
    hideDropdownTimer = null
  }, 120)
}

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response: any = await request({
      url: '/xiangsu/current-user/',
      method: 'get'
    })
    
    if (response.success && response.data) {
      username.value = response.data.username || '用户'
      const av = response.data.avatar_url || response.data.avatar || ''
      userAvatar.value = av
      userPoints.value = response.data.points || 0
      isLoggedIn.value = true

      const storage = localStorage.getItem('userToken') ? localStorage : sessionStorage
      storage.setItem('userAvatar', av)
      storage.setItem('username', username.value)
      storage.setItem('userPoints', String(userPoints.value))

      await fetchUserStatistics()
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    isLoggedIn.value = false
  }
}

// 退出登录 - 简化版本，专注于本地退出功能
const handleLogout = () => {
  showConfirm('确定要退出登录吗？').then(ok => {
    if (!ok) return
    
    // 清除用户状态
    isLoggedIn.value = false
    username.value = '用户'
    userAvatar.value = ''
    userPoints.value = 0
    userStatistics.value = {
      posts_count: 0,
      completed_challenges_count: 0,
      carbon_records_count: 0
    }
    
    // 清除本地存储中的所有用户相关数据
    localStorage.removeItem('userToken')
    localStorage.removeItem('username')
    localStorage.removeItem('userAvatar')
    localStorage.removeItem('userPoints')
    localStorage.removeItem('userStatistics')
    sessionStorage.removeItem('userToken')
    sessionStorage.removeItem('username')
    sessionStorage.removeItem('userAvatar')
    sessionStorage.removeItem('userPoints')
    sessionStorage.removeItem('userStatistics')
    
    // 跳转到登录页面
    router.push('/login')
  })
}

const showConfirm = (text: string): Promise<boolean> => {
  return new Promise(resolve => {
    const overlay = document.createElement('div')
    overlay.setAttribute('style', 'position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:9998')
    const modal = document.createElement('div')
    modal.setAttribute('style', 'position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);min-width:280px;padding:18px 16px;border-radius:12px;background:#222;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,0.3);z-index:9999')
    const msg = document.createElement('div')
    msg.textContent = text
    msg.setAttribute('style', 'font-size:14px;margin-bottom:14px')
    const btns = document.createElement('div')
    btns.setAttribute('style', 'display:flex;gap:10px;justify-content:flex-end')
    const ok = document.createElement('button')
    ok.textContent = '确定'
    ok.setAttribute('style', 'padding:6px 12px;border:none;background:#2E8B57;color:#fff;border-radius:8px;cursor:pointer')
    const cancel = document.createElement('button')
    cancel.textContent = '取消'
    cancel.setAttribute('style', 'padding:6px 12px;border:none;background:#555;color:#fff;border-radius:8px;cursor:pointer')
    ok.onclick = () => { modal.remove(); overlay.remove(); resolve(true) }
    cancel.onclick = () => { modal.remove(); overlay.remove(); resolve(false) }
    btns.appendChild(cancel); btns.appendChild(ok)
    modal.appendChild(msg); modal.appendChild(btns)
    document.body.appendChild(overlay)
    document.body.appendChild(modal)
  })
}

// 获取用户统计数据
const fetchUserStatistics = async () => {
  try {
    const response: any = await request({
      url: '/xiangsu/user/statistics/',
      method: 'get'
    })
    
    if (response.success && response.data) {
      userStatistics.value = {
        posts_count: response.data.posts_count || 0,
        completed_challenges_count: response.data.completed_challenges_count || 0,
        carbon_records_count: response.data.carbon_records_count || 0
      }
      
      // 存储到本地，以便快速访问
      const storage = localStorage.getItem('userToken') ? localStorage : sessionStorage
      storage.setItem('userStatistics', JSON.stringify(userStatistics.value))
    }
  } catch (error) {
    console.error('获取用户统计数据失败:', error)
  }
}

// 滚动监听
const handleScroll = () => {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  isScrolled.value = scrollTop > 50
  if (isMobile.value) {
    isMobileCollapsed.value = scrollTop > 100
  }
  showBackToTop.value = scrollTop > 300
}

// 检查移动端
const checkMobile = () => {
  isMobile.value = window.innerWidth < 768
}

// 切换移动端菜单
const toggleMobileMenu = () => {
  mobileMenuOpen.value = !mobileMenuOpen.value
}

// 关闭移动端菜单
const closeMobileMenu = () => {
  mobileMenuOpen.value = false
}

onMounted(() => {
  // 初始化响应式检测
  checkMobile()
  window.addEventListener('resize', checkMobile)
  window.addEventListener('scroll', handleScroll)
  
  // 检查是否有登录凭证
  const token = localStorage.getItem('userToken') || sessionStorage.getItem('userToken')
  
  // 优先从本地存储读取基本信息，提高页面加载速度
  const savedUsername = localStorage.getItem('username') || sessionStorage.getItem('username')
  const savedAvatar = localStorage.getItem('userAvatar') || sessionStorage.getItem('userAvatar')
  const savedPoints = localStorage.getItem('userPoints') || sessionStorage.getItem('userPoints')
  const savedStatistics = localStorage.getItem('userStatistics') || sessionStorage.getItem('userStatistics')
  
  if (savedUsername) {
    username.value = savedUsername
    isLoggedIn.value = true
  }
  if (savedAvatar) {
    userAvatar.value = savedAvatar
  }
  if (savedPoints) {
    userPoints.value = parseInt(savedPoints)
  }
  if (savedStatistics) {
    try {
      userStatistics.value = JSON.parse(savedStatistics)
    } catch (e) {
      console.error('解析用户统计数据失败:', e)
    }
  }
  
  // 然后通过API获取最新信息
  if (token) {
    fetchUserInfo()
  }
})

onUnmounted(() => {
  window.removeEventListener('resize', checkMobile)
  window.removeEventListener('scroll', handleScroll)
})

// handleLogout函数已在前面定义，包含API调用功能
const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' })
}

const pointsToast = ref<{ show: boolean; delta: number; total: number }>({ show: false, delta: 0, total: 0 })
const triggerPointsToast = (delta: number) => {
  const current = Number(userPoints.value) || 0
  const total = current + delta
  pointsToast.value = { show: true, delta, total }
  userPoints.value = total
  const storage = localStorage.getItem('userToken') ? localStorage : sessionStorage
  storage.setItem('userPoints', String(total))
  setTimeout(() => { pointsToast.value.show = false }, 2200)
}
provide('triggerPointsToast', triggerPointsToast)
</script>

<style scoped>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x: hidden;
}

/* ===== 2025年高端导航栏样式 ===== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 90px;
  background: rgba(255, 255, 255, 0.95);  /* 白色背景 */
  backdrop-filter: blur(14px);         /* 毛玻璃效果 */
  -webkit-backdrop-filter: blur(14px);
  border-bottom: none;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transition: all 0.4s ease;
  font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.navbar.scrolled {
  background: rgba(255, 255, 255, 0.98); /* 向下滚动后保持白色 */
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  height: 70px;
}

.navbar.mobile-collapsed {
  height: 70px;
}

.navbar-container {
  width: 100%;
  margin: 0;
  padding-left: 24px;
  padding-right: 12px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}

/* Logo区域 */
.navbar-logo {
  flex-shrink: 0;
  margin-right: 32px;
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #333333;
  transition: all 0.3s ease;
  height: 58px; /* 90px * 65% */
  font-weight: bold; /* 加粗字体 */
}

.navbar.scrolled .logo-link {
  transform: scale(0.9);
  height: 52px;
}

.logo-icon {
  font-size: 32px;
  margin-right: 16px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  color: #73A986;
}

.logo-text {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.5px;
  font-family: 'HarmonyOS Sans', 'Noto Sans SC', sans-serif;
  color: #333333;
}

/* 桌面端导航菜单 */
.navbar-menu {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
  flex: 1;
  justify-content: flex-start;
}

.nav-link {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  text-decoration: none;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  transition: all 0.3s ease;
  padding: 0 8px;
  font-family: 'HarmonyOS Sans', 'Noto Sans SC', sans-serif;
}

.nav-link:hover {
  transform: translateY(-2px) scale(1.05);
  color: #73A986;
}

.nav-link.active {
  color: #73A986;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 36px; /* 36px长 */
  height: 3px; /* 3px高 */
  background: #73A986;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(115, 169, 134, 0.25);
}

/* 用户区域 */
.navbar-user {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
  margin-left: auto;
  margin-right: 0;
}

.avatar-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 40px; /* 圆形40px */
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  flex-shrink: 0;
  background: white; /* 白色背景 */
}

.user-avatar:hover {
  transform: scale(1.05);
  border-color: rgba(0, 0, 0, 0.2);
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  font-weight: 600;
  font-size: 16px;
}

.dropdown-menu {
  position: absolute;
  top: 44px;
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px;
  min-width: 140px;
}

.dropdown-item {
  display: block;
  padding: 10px 12px;
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  background: transparent;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.dropdown-item:hover {
  background: #f4f6f8;
}

button.dropdown-item {
  border: none;
  outline: none;
  font: inherit;
}

.username {
  font-size: 14px;
  font-weight: 600;
  color: #000000;
  white-space: nowrap;
  font-family: 'HarmonyOS Sans', 'Noto Sans SC', sans-serif;
}

.user-points {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 215, 0, 0.15);
  padding: 2px 8px;
  border-radius: 12px;
  backdrop-filter: blur(8px);
}

.points-icon {
  font-size: 12px;
}

.points-value {
  font-size: 12px;
  font-weight: 700;
  color: #ffd700;
}

.points-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 2000;
}

.toast-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.toast-title {
  font-weight: 600;
  color: #2c3e50;
}

.toast-body {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.delta {
  color: #4E8E68;
  font-weight: 700;
}

.sep {
  color: #6c757d;
}

.total {
  color: #6c757d;
}

.notification-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.notification-btn:hover {
  transform: translateY(-2px) scale(1.05);
  background: rgba(0, 0, 0, 0.1);
}

.bell-icon {
  font-size: 16px;
  color: #000000;
}

.notification-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: #ff4757;
  color: white;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
}

/* 取消头部独立登出按钮，统一在头像下拉中 */

/* 移动端汉堡菜单 */
.mobile-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  gap: 4px;
  transition: all 0.3s ease;
}

.mobile-menu-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}

.hamburger-line {
  width: 24px;
  height: 2px;
  background: black;
  border-radius: 1px;
  transition: all 0.3s ease;
}

.hamburger-line.active:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-line.active:nth-child(2) {
  opacity: 0;
}

.hamburger-line.active:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* 移动端菜单 */
.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.mobile-menu.active {
  opacity: 1;
  visibility: visible;
}

.mobile-menu-content {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  background: linear-gradient(135deg, rgba(115, 169, 134, 0.95) 0%, rgba(94, 143, 115, 0.95) 100%);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.mobile-menu.active .mobile-menu-content {
  transform: translateX(0);
}

.mobile-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.mobile-menu-header {
  padding: 32px 24px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-user-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: inherit;
}

.mobile-nav {
  flex: 1;
  padding: 24px 0;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
}

.mobile-nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transform: translateX(8px);
}

.mobile-nav-link.active {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}

.mobile-nav-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: #73A986;
  border-radius: 0 2px 2px 0;
}

.nav-icon {
  font-size: 20px;
  width: 24px;
  text-align: center;
}

.mobile-menu-footer {
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
}

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: #FFFFFF;
  color: var(--primary-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 1001;
}

.mobile-notification-btn, .mobile-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.mobile-notification-btn:hover, .mobile-logout-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-2px);
}

.main-content {
  flex: 1;
  padding: 110px 20px 30px; /* 增加顶部padding适应固定导航栏 */
  background-color: var(--background-color);
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  transition: padding-bottom 0.3s ease;
}

.main-content.with-bottom-nav {
  padding-bottom: 80px;
}

.footer {
  background-color: var(--secondary-color);
  color: white;
  margin-top: auto;
  width: 100%;
}

.footer-content {
  display: flex;
  justify-content: space-around;
  padding: 40px 20px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

.fat-footer {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 32px;
  padding: 48px 32px;
}

.footer-section {
  flex: 1;
  min-width: 200px;
  margin: 10px 20px;
  box-sizing: border-box;
}

.footer-section h3 {
  margin-top: 0;
  color: var(--primary-color);
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 12px;
  line-height: 1.8;
}

.footer-section a {
  color: #ecf0f1;
  text-decoration: none;
  transition: var(--transition);
}

.footer-section a:hover {
  color: var(--primary-color);
}

.footer-bottom {
  text-align: center;
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(0, 0, 0, 0.2);
  width: 100%;
  box-sizing: border-box;
}

.footer-bottom p {
  margin: 0;
}

.footer-brand .brand-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.footer-brand .brand-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.footer-brand .brand-desc {
  color: #ecf0f1;
  margin-bottom: 10px;
}

.footer-brand .brand-version {
  display: inline-block;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  font-size: 12px;
  color: #cfd8dc;
}

/* ===== 响应式设计 ===== */
@media (max-width: 1200px) {
  .navbar-container {
    padding: 0 32px;
  }
  
  .navbar-menu {
    gap: 24px;
  }
}

@media (max-width: 992px) {
  .navbar-container {
    padding: 0 24px;
  }
  
  .navbar-menu {
    gap: 20px;
  }
  
  .navbar-user {
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .navbar {
    height: 70px;
  }
  
  .navbar-container {
    padding: 0 16px;
  }
  
  .navbar-menu {
    display: none;
  }
  
  .mobile-menu-btn {
    display: flex;
  }
  
  .mobile-menu {
    display: block;
  }
  
  .navbar-user {
    display: none;
  }
  
  .logo-text {
    font-size: 20px;
  }
  
  .logo-icon {
    font-size: 28px;
  }
}

@media (max-width: 480px) {
  .navbar-container {
    padding: 0 12px;
  }
  
  .logo-text {
    font-size: 18px;
  }
  
  .logo-icon {
    font-size: 24px;
  }
  
  .mobile-menu-content {
    width: 280px;
  }
  
  .mobile-nav-link {
    padding: 14px 20px;
    font-size: 15px;
  }
}
</style>
